<template>
	<view>
		<block v-if="!hasAvatar">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="userInfo.avatarUrl"></image>
			</button>
		</block>
		<block v-else>
			<view class="avatar-container">
				<image class="avatar" :src="userInfo.avatarUrl"></image>
			</view>
		</block>
		
		<u-gap height="40"></u-gap>
		<view class="func-container">
			<view>
				<view class="func-item-content">
					<view @click="">我的收藏</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="func-item-content">
					<view @click="">汉字集</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</view>
	</view>
</template>

<script>
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	import { updateUser } from '@/api/my'
	export default {
		data() {
			return {
				"userInfo": {
					"avatarUrl": defaultAvatarUrl
				},
				"hasAvatar": false
			}
		},
		methods: {
			onChooseAvatar(e) {
				const { avatarUrl, nickName } = e.detail
				this.userInfo.avatarUrl = avatarUrl
				// 获取存储的openid
				let userInfo = uni.getStorageSync("userInfo")
				// 存储avatarUrl
				// 发起请求到后台存储，使用base64
				uni.getFileSystemManager().readFile({
					filePath: avatarUrl,
					encoding: "base64",
					success: function(res) {
						console.log("userInfo", userInfo)
						updateUser({
							openId: userInfo.openId,
							avatarUrl: "data:image/jpeg;base64," + res.data
						}).then(res => {
							userInfo.avatarUrl = avatarUrl;
							uni.setStorageSync("userInfo", userInfo);
						})
					}
				})
			}
		},
		onShow() {
			// 判断图像是否存在
			let userInfo = uni.getStorageSync("userInfo")
			console.log(userInfo)
			this.hasAvatar = userInfo.avatarUrl != defaultAvatarUrl && userInfo.avatarUrl != "";
			console.log("hasAvatar:", this.hasAvatar);
			if(this.hasAvatar) {
				this.userInfo.avatarUrl = userInfo.avatarUrl;
			}
		}
	}
</script>

<style>
	.avatar-wrapper {
	  padding: 0;
	  width: 56px !important;
	  margin-top: 40px;
	  margin-bottom: 40px;
	  border-radius: 50%;
	}
	
	.avatar {
	  display: block;
	  width: 56px;
	  height: 56px;
	  border-radius: 50%;
	}
	
	.nickname-wrapper {
	  display: flex;
	  width: 100%;
	  padding: 16px;
	  box-sizing: border-box;
	  border-top: .5px solid rgba(0, 0, 0, 0.1);
	  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
	  color: black;
	}
	
	.nickname-label {
	  width: 105px;
	}
	
	.avatar-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
	}
	
	.func-container {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx;
	}
	
	.func-item-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
	}
	
	.func-item-content:active {
		background-color: lightgray;
	}
</style>
